<template>
    <view class="page-container flex fd-c">
        <!-- 顶部状态栏 -->
        <topBar :back="true" />
        <!-- 活动场 -->
        <scroll-view class="scrollable-content" scroll-y
            style="padding-bottom: calc(20rpx + env(safe-area-inset-bottom));">
            <!-- 返回主页 -->
            <!-- <view class="flex jc-fd" @click="isShowActivity = false" style="margin-top: 60rpx;margin-right: 32rpx;">
				<text class="back-home-text">主页</text>
			</view> -->
            <!-- 艺术咖 -->
            <view class="game-modes-section" style="margin-top: 40rpx;margin-bottom: 20rpx;">
                <view class="modes-row flex">
                    <view class="mode-card" @click="handleBeginnerClick(indexList.theme[6].code, 2)">
                        <image :src="BASE_URL + indexList.theme[6].backimg" mode="aspectFill" class="bg-image">
                        </image>
                        <view class="mode-title"
                            style="color: #fff;font-size: 38rpx;margin-bottom: 12rpx;padding: 32rpx;padding-bottom: 0;">
                            {{ indexList.theme[6].name }}</view>
                        <view class="mode-title"
                            style="color: rgba(255, 255, 255, 0.6);font-size: 24rpx;padding: 32rpx;padding-top: 0;">
                            品味大师杰作</view>
                    </view>
                    <view class="flex-1 flex fd-c ai-c jc-c" style="gap: 16rpx;height: 384rpx;">
                        <view class="flex-1 mode-card"
                            style="overflow: hidden; gap: 24rpx;border-radius: 40rpx;position: relative;width: 100%;"
                            @click="handleBeginnerClick(indexList.theme[5].code, 2)">
                            <image :src="BASE_URL + indexList.theme[5].backimg" mode="aspectFill" class="bg-image">
                            </image>
                            <view class="mode-text">
                                <view class="mode-title"
                                    style="color: #fff;font-size: 38rpx;margin-bottom: 12rpx;padding: 32rpx;padding-bottom: 0;">
                                    {{ indexList.theme[5].name }}
                                </view>
                                <view class="mode-title"
                                    style="color: rgba(255, 255, 255, 0.6);font-size: 24rpx;padding: 32rpx;padding-top: 0;">
                                    寻找乐趣</view>
                            </view>
                        </view>
                        <view class="flex-1 mode-card"
                            style="overflow: hidden; gap: 24rpx;border-radius: 40rpx;position: relative;width: 100%;"
                            @click="handleBeginnerClick(indexList.theme[4].code, 2)">
                            <image :src="BASE_URL + indexList.theme[4].backimg" mode="aspectFill" class="bg-image">
                            </image>
                            <view class="mode-text">
                                <view class="mode-title"
                                    style="color: #fff;font-size: 38rpx;margin-bottom: 12rpx;padding: 32rpx;padding-bottom: 0;">
                                    {{ indexList.theme[4].name }}
                                </view>
                                <view class="mode-title"
                                    style="color: rgba(255, 255, 255, 0.6);font-size: 24rpx;padding: 32rpx;padding-top: 0;">
                                    热爱花草树木的你</view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <!-- 费脑子 -->
            <view style="padding: 0 32rpx;margin-bottom: 16rpx;"
                @click="handleBeginnerClick(indexList.theme[3].code, 2)">
                <view class="master-card" style="display: block;">
                    <image class="bg-image" :src="BASE_URL + indexList.theme[3].backimg" mode="aspectFill"></image>
                    <view class="master-title"
                        style="color: #fff;font-size: 38rpx;margin-bottom: 12rpx;padding: 32rpx;padding-bottom: 0;">
                        {{ indexList.theme[3].name }}
                    </view>
                    <view class="master-title"
                        style="color: rgba(255, 255, 255, 0.6);font-size: 24rpx;padding: 32rpx;padding-top: 0;">
                        考考思维缜密性
                    </view>
                </view>
            </view>
            <!-- 潮不潮‘吧 -->
            <view class="game-modes-section" style="margin-bottom: 20rpx;">
                <view class="modes-row flex">
                    <view class="mode-card" style="height: 384rpx;"
                        @click="handleBeginnerClick(indexList.theme[2].code, 2)">
                        <image :src="BASE_URL + indexList.theme[2].backimg" mode="aspectFill" class="bg-image">
                        </image>
                        <view class="mode-title"
                            style="color: #fff;font-size: 38rpx;margin-bottom: 12rpx;padding: 32rpx;padding-bottom: 0;">
                            {{ indexList.theme[2].name }}
                        </view>
                        <view class="mode-title"
                            style="color: rgba(255, 255, 255, 0.6);font-size: 24rpx;padding: 32rpx;padding-top: 0;">
                            测测你的时尚品味</view>
                    </view>
                    <view class="mode-card" style="height: 384rpx;"
                        @click="handleBeginnerClick(indexList.theme[1].code, 2)">
                        <image :src="BASE_URL + indexList.theme[1].backimg" mode="aspectFill" class="bg-image">
                        </image>
                        <view class="mode-title"
                            style="color: #fff;font-size: 38rpx;margin-bottom: 12rpx;padding: 32rpx;padding-bottom: 0;">
                            {{ indexList.theme[1].name }}
                        </view>
                        <view class="mode-title"
                            style="color: rgba(255, 255, 255, 0.6);font-size: 24rpx;padding: 32rpx;padding-top: 0;">
                            厨艺大显身手</view>
                    </view>
                </view>
            </view>
            <!-- 娱乐“圈” -->
            <view style="padding: 0 32rpx;margin-bottom: 16rpx;"
                @click="handleBeginnerClick(indexList.theme[0].code, 2)">
                <view class="master-card" style="display: block;">
                    <image class="bg-image" :src="BASE_URL + indexList.theme[0].backimg" mode="aspectFill"></image>
                    <view class="master-title"
                        style="color: #fff;font-size: 38rpx;margin-bottom: 12rpx;padding: 32rpx;padding-bottom: 0;">
                        {{ indexList.theme[0].name }}
                    </view>
                    <view class="master-title"
                        style="color: rgba(255, 255, 255, 0.6);font-size: 24rpx;padding: 32rpx;padding-top: 0;">
                        考考思维缜密性
                    </view>
                </view>
            </view>
        </scroll-view>
        <!-- 学科选择弹窗 -->
        <subject-selector ref="subjectSelectorRef" @confirm="handleSubjectConfirm" @close="handleSubjectClose" />
        <!-- 人数选择弹窗 -->
        <player-count-selector ref="playerCountSelectorRef" @confirm="handlePlayerCountConfirm"
            @close="handlePlayerCountClose" />
        <!-- 级别选择弹窗 -->
        <level-selector ref="levelSelectorRef" @confirm="handleLevelConfirm" @close="handleLevelClose" />
    </view>
</template>

<script setup>
import topBar from '@/components/topBar.vue'
import subjectSelector from '@/components/subject-selector.vue'
import playerCountSelector from '@/components/player-count-selector.vue'
import levelSelector from '@/components/level-selector.vue'
import api from '@/api'
import { onLoad, onShow } from '@dcloudio/uni-app'

import { ref } from 'vue'
import { useUserStore } from '@/store/index.js'
import { BASE_URL } from '@/utils/request'
const userStore = useUserStore()
const indexList = ref([])
onLoad(() => {
    if (userStore.hasLogin) {
        api.getUserInfo({
            user_id: userStore.userInfo?.id
        }).then(res => {
            userStore.setUserInfo(res.data)
        })
    }


    api.getQuestionList().then(res => {
        console.log(res.data)
        indexList.value = res.data
    }).catch(err => {
        console.log(err)
    })
    uni.login({
        provider: 'weixin',
        success: (res) => {
            console.log(res)
        },
        fail: (err) => {
            console.log(err)
        }
    })
})

onShow(() => {
    uni.showTabBar()
})

const subjectSelectorRef = ref(null)
const playerCountSelectorRef = ref(null)
const levelSelectorRef = ref(null)
// 自组局点击
const handleZizuClick = () => {
    uni.hideTabBar()
    playerCountSelectorRef.value?.openPopup('zizu')
}

// 处理等级场点击
const handleBeginnerClick = (val, scene_id) => {

    subjectSelectorRef.value?.openPopup({
        type: val,
        indexList: indexList.value,
        scene_id
    })
    uni.hideTabBar()
}

// 处理排位赛点击
const handlePaiweiClick = () => {
    uni.hideTabBar()
    playerCountSelectorRef.value?.openPopup()
}

// 排位赛流程状态
const paiweiFlow = ref({
    playerCount: null,
    level: null,
    subject: null
})

// 处理人数选择确认
const handlePlayerCountConfirm = (count, type) => {
    paiweiFlow.value.playerCount = count
    // 打开级别选择弹窗
    if (type === 'zizu') {
        uni.navigateTo({
            url: `/pages/index/datiqian/datiqian?mode=${type}&players=${count}&scene_id=1`
        })
        paiweiFlow.value = {
            playerCount: null,
            level: null,
            subject: null
        }
    } else {
        levelSelectorRef.value?.openPopup()
    }
}

// 处理人数选择关闭
const handlePlayerCountClose = () => {
    uni.showTabBar()
    console.log('人数选择弹窗已关闭')
}

// 处理级别选择确认
const handleLevelConfirm = (level) => {
    paiweiFlow.value.level = level
    console.log('选择的级别:', level)
    // 打开学科选择弹窗，传递排位赛类型
    subjectSelectorRef.value?.openPopup({
        type: `paiwei-${level}`
    })
}

// 处理级别选择关闭
const handleLevelClose = () => {
    uni.showTabBar()
    console.log('级别选择弹窗已关闭')
}

const isShowActivity = ref(true)

// 处理学科确认选择
const handleSubjectConfirm = (subject) => {
    console.log('选择的学科:', subject)
    console.log(paiweiFlow.value.playerCount)
    console.log(paiweiFlow.value.level)
    // 如果是排位赛流程，更新状态并处理
    if (paiweiFlow.value.playerCount && paiweiFlow.value.level) {
        paiweiFlow.value.subject = subject
        console.log('排位赛完整选择:', paiweiFlow.value)
        // 这里可以添加跳转逻辑或其他处理
        uni.navigateTo({
            url: `/pages/index/datiqian/datiqian?subject=${JSON.stringify(subject)}&mode=paiwei&players=${paiweiFlow.value.playerCount}&level=${paiweiFlow.value.level}`
        })

        // 重置排位赛流程状态
        paiweiFlow.value = {
            playerCount: null,
            level: null,
            subject: null
        }
    } else {
        // 普通模式
        uni.showToast({
            title: `已选择${getSubjectLabel(subject)}`,
            icon: 'success'
        })
        uni.navigateTo({
            url: '/pages/index/datiqian/datiqian?subject=' + JSON.stringify(subject)
        })
    }
}

// 处理学科弹窗关闭
const handleSubjectClose = () => {
    uni.showTabBar()
    console.log('学科选择弹窗已关闭')
}

// 获取学科标签
const getSubjectLabel = (value) => {
    const subjectMap = {
        'chinese': '语文',
        'math': '数学',
        'foreign': '外语',
        'politics': '政治',
        'history': '历史',
        'geography': '地理',
        'physics': '物理',
        'chemistry': '化学',
        'biology': '生物',
        'general': '常识',
        'mixed': '混合',
        'philosophy': '哲学',
        'economics': '经济学',
        'law': '法学',
        'education': '教育学',
        'literature': '文学',
        'science': '理学',
        'engineering': '工学',
        'agriculture': '农学',
        'medicine': '医学',
        'military': '军事学',
        'management': '管理学',
        'art': '艺术',
        'information': '信息技术',
        'technology': '通用技术',
        'health': '体育与健康'
    }
    return subjectMap[value] || value
}

// 获取级别标签
const getLevelLabel = (value) => {
    const levelMap = {
        'chuji': '初级',
        'zhongji': '中级',
        'gaoji': '高级',
        'zhuanjia': '专家级',
        'dashi': '大师级'
    }
    return levelMap[value] || value
}
</script>

<style lang="scss" scoped>
.page-container {
    background-color: #FFFFFF;
    position: relative;
    overflow: hidden;
}



/* 用户信息区域 */
.user-section {
    padding: 0 32rpx;
    margin-top: 20rpx;
}

.user-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.user-avatar {
    width: 60rpx;
    height: 60rpx;
    border-radius: 50%;
}

.user-actions {
    display: flex;
    gap: 12rpx;
}

.action-btn {
    width: 40rpx;
    height: 40rpx;
    border-radius: 50%;
    background-color: #F5F5F5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20rpx;
    color: #000000;
}

/* 问候语 */
.greeting-section {
    height: 140rpx;
    padding: 0 32rpx;
    padding-top: 32rpx;
    padding-bottom: 16rpx;
}

.greeting {
    font-size: 56rpx;
    // font-weight: bold;
    color: #333;
}

/* 难度等级区域 */
.difficulty-section {
    padding: 0 32rpx;
    gap: 16rpx;
    margin-bottom: 16rpx;
}

.difficulty-card {
    flex: 1;
    height: 317rpx;
    border-radius: 40rpx;
    transition: transform 0.2s ease;
    position: relative;
    overflow: hidden;
    gap: 52rpx;

    &:active {
        transform: scale(0.95);
    }



    .title {
        font-size: 28rpx;
        font-weight: 700;
        color: #333;
        position: relative;
        z-index: 2;
    }
}

.bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* 大师场区域 */
.master-section {
    padding: 0 32px 24px;
}

.master-card {
    width: 100%;
    height: 317rpx;
    gap: 52rpx;
    border-radius: 40rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
    position: relative;
    overflow: hidden;

    &:active {
        transform: scale(0.95);
    }

    .master-title {
        font-size: 30rpx;
        font-weight: 700;
        color: #333;
        position: relative;
        z-index: 2;
    }
}

/* 游戏模式区域 */
.game-modes-section {
    padding: 0 32rpx;
}

.modes-row {
    gap: 16rpx;
}

.mode-card {
    flex: 1;
    // height: 384rpx;
    border-radius: 40rpx;
    transition: transform 0.2s ease;
    position: relative;
    overflow: hidden;
    gap: 52rpx;

    &:active {
        transform: scale(0.95);
    }

    .mode-icon {
        font-size: 36px;
        margin-right: 12px;
        color: #000000;
        z-index: 1;
    }

}

.mode-text {
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 2;
    gap: 4rpx;
}

.mode-title {
    font-size: 28rpx;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.8);
    position: relative;
    z-index: 2;
}

.mode-subtitle {
    font-size: 24rpx;
    color: rgba(0, 0, 0, 0.5);
}

.modes-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.custom {
    background: linear-gradient(135deg, #F0E68C 0%, #FFFFE0 100%);
}

.activity {
    background: linear-gradient(135deg, #D3D3D3 0%, #C0C0C0 100%);
}
</style>
